<template>
	<div class="payment">
		<van-sticky>
			<div class="payment_navbar">
				<div @click="toShoppingCart">
					<van-icon name="arrow-left" style="font-size: 18px;line-height: 50px;margin-left: 20px;" />
				</div>
				<div>提交订单</div>
				<div></div>
			</div>
		</van-sticky>
		<!--选择地址弹出层-->
		<van-popup v-model="showAddress" position="bottom" :style="{ height: '40%' ,width:'100%'}" closeable round>
			<div class="PersonAddtitle">选择收货地址</div>
			<van-radio-group v-model="selectedAddress">
				<div class="PersonAddtitle_card" v-for="ad in addressList">
					<div>
						<van-radio :name="ad.address_id" icon-size="14px" @click="chooseAddress(ad)"></van-radio>
					</div>
					<div>
						<div>
							<van-tag mark type="warning">{{ad.receiver_label}}</van-tag>
							{{ad.receiver_address}}
						</div>
						<div>
							<span>{{ad.receiver_name}}</span>
							<span>{{ad.receiver_telephone}}</span>
						</div>
					</div>
					<div class="hr"></div>
				</div>
			</van-radio-group>
		</van-popup>

		<!--选择红包弹出层-->
		<van-popup v-model="showRedBag" position="bottom" :style="{ height: '70%' ,width:'100%'}" closeable round>
			<div class="PersonAddtitle">
				<span @click="notuseRedBag" style="color: #4169E1; font-size: 16px;font-weight: 600; ">不使用红包</span>
			</div>
			<div v-for="rb in redbaglistcan">
				<!--红包格式-->
				<div @click="chooseRedBag(rb)" class="coupon coupon-wave-left coupon-wave-right coupon-yellow-gradient">
					<div class="coupon-info coupon-hole coupon-info-right-dashed">
						<div class="coupon-store">{{rb.redBag.red_bag_content}}</div>
						<div class="coupon-price">&yen;{{rb.redBag.face_value}}<span>红包</span></div>
						<div class="coupon-description">订单满{{rb.redBag.user_level}}元</div>
					</div>
					<div class="coupon-get">
						<div class="coupon-desc">副券</div>
						<div class="coupon-expiry-date">{{rb.redBag.dead_time}}</div>
					</div>
				</div>
			</div>

			<van-divider v-show="showline" content-position="left">不到满减金额哦~再去买点吧</van-divider>

			<div v-for="rb in redbaglistcanot">
				<!--红包格式-->
				<div class="coupon coupon-wave-left coupon-wave-right coupon-blue-gradient">
					<div class="coupon-info coupon-hole coupon-info-right-dashed">
						<div class="coupon-store">{{rb.redBag.red_bag_content}}</div>
						<div class="coupon-price">&yen;{{rb.redBag.face_value}}<span>红包</span></div>
						<div class="coupon-description">订单满{{rb.redBag.user_level}}元</div>
					</div>
					<div class="coupon-get">
						<div class="coupon-desc">副券</div>
						<div class="coupon-expiry-date">{{rb.redBag.dead_time}}</div>
					</div>
				</div>
			</div>

			</van-radio-group>
		</van-popup>

		<div class="backup">
			<div></div>
			<div></div>
		</div>
		<div class="payment_address">
			<div class="payment_address_add" @click="showAdd">
				<div>
					{{configAddress.receiver_address}}
				</div>
				<div>
					<span>{{configAddress.receiver_name}}</span>
					<span>{{configAddress.receiver_telephone}}</span>
				</div>
				<div class="hr"></div>
			</div>
			<div class="payment_address_deli">
				<div>立即送出</div>
				<div>大约30分钟后送达</div>
			</div>
		</div>

		<div class="orderdetail_order">
			<div>
				咚咚哒哒美食店
			</div>

			<div class="hr" />

			<div class="foods_box" v-for="sp in sel">
				<div>
					<van-image fit="cover" radius="10px" width="4rem" height="4rem" :src="`http://localhost:8080/res/${sp.food.food_img}`"
					 style="margin: auto;" />
				</div>
				<div>
					<span>{{sp.food.food_name}}</span>
					<span>口味：{{sp.detail_attach}}</span>
					<span>x{{sp.food_amount}}</span>
				</div>
				<div>
					<span>&yen;{{sp.total_cost}}</span>
					<span>&yen;{{sp.total_cost}}</span>
				</div>
			</div>
			<div class="orderdetail_order_border">
				<div class="hr" />
				<div class="other-and-summary">
					<div class="packing-expense">
						<div class="wordfont"><span>包装费</span></div>
						<div class="moneyfont"><span>&yen;2</span></div>
					</div>
					<div class="freight">
						<div class="wordfont"><span>运费</span></div>
						<div class="moneyfont"><span>&yen;2</span></div>
					</div>
					<div class="red-packet">
						<div class="wordfont"><span>红包</span></div>
						<div class="moneyfont" style="color:#DB7093;" @click="showRed">
							<span>{{faceValue}}</span>
							<span>{{redbagSelect}}</span>
						</div>
					</div>
					<div class="integral">
						<div class="wordfont">
							<span>积分</span>
							<span @click="useIntegralClick" style="margin-left: 10px;color:#DB7093;">{{useIntegral? '取消' : '使用'}}</span>
						</div>
						<div class="moneyfont" style="color:#DB7093;">
							<span>{{integralValue}} </span>
						</div>
					</div>

					<div class="hr" />
					<div class="discount">
						<div>
							<span>已优惠</span>
							<span>&yen;{{discount}}</span>
							<span>共计</span>
							<span>&yen;{{orderTruePrice}}</span>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div style="height: 80px;"></div>

		<div class="fixed_pay">
			<div>
				<div>
					<span>&yen;</span>
					<span>{{orderTruePrice}}</span>
				</div>
				<div><span>已优惠&yen;{{discount}}</span></div>

			</div>
			<div @click="topayorder">
				<span>提交订单</span>
			</div>
		</div>



	</div>

</template>

<script>
	import PaymentService from './PaymentService.js'
	import {
		Toast
	} from 'vant';
	import { Notify } from 'vant';
	import tools from "@/tools/tools.js"
	export default {
		name: 'Payment',
		data() {
			return {
				selectedAddress: '', //地址框框中选中的地址
				showAddress: false, //全部地址框框

				showRedBag: false, //全部红包宽广
				addressList: [], //当前用户地址列表
				configAddress: '', //用户默认地址

				redbagSelect: '请选择', //默认
				faceValue: '', //红包面值字符
				faceValueNumber: 0, //红包数值
				selectedRedBag: '', //红包列表中被选中的
				redbaglistcan: [], //红包列表可以使用的
				redbaglistcanot: [], //红包列表不满足满减的

				point: '', //用户积分
				useIntegral: false, //是否使用积分
				integralValue: '-￥0', //显示优惠金额
				integralValueNumber: 0, //减少数值


				showline: false,
				url: 'https://img.yzcdn.cn/vant/cat.jpeg',
				sel: [], //菜品列表
				total:'', //全部菜品价格
				user_id:'',//用户id
				vip_lv:0,//用户vip等级
				vipdiscount:1,//vip打折
				
				
			};
		},
		created() {
			this.sel = this.$route.params.sel;
			this.total = this.$route.params.totalPrice;
			console.log(this.total)
			console.log(this.sel)
			this.getNowAllAdress();
			this.getNowAllRedBag();
			PaymentService.getloginService(res => {
				this.point = res.loginUser.user_point;
				this.user_id=res.loginUser.user_id;
				//this.loginUser=res.loginUser
				//console.log(this.loginUser)
				PaymentService.getVipByUserIdService({user_id:res.loginUser.user_id}, res => {
					if(res.vip!=null){
						this.vip_lv=res.vip.vip_lv;
						console.log(this.vip_lv)
						if(res.vip.vip_lv==1){
							this.vipdiscount=1;
						}else if(res.vip.vip_lv==2){
							this.vipdiscount=0.95;
						}else if(res.vip.vip_lv==3){
							this.vipdiscount=0.9;
						}
					}else{
						console.log('bushi')
					}
					
					console.log(this.vipdiscount)
				
				});
			});
			
		},
		
		methods: {
			//显示地址弹窗
			showAdd() {
				this.showAddress = true;
			},
			//显示红包弹窗
			showRed() {
				this.showRedBag = true;
				// console.log("zhelizheli ")
				// console.log(this.total)
			},

			//获得当前用户所有地址
			getNowAllAdress() {
				PaymentService.getNowAllService(res => {
					this.addressList = res.AddressList;
					this.configAddress = (res.AddressList || []).find((address) => address.defult_flag === 1);
					//console.log(this.addressList)
					//console.log(this.configAddress)
				})
			},
			//获得当前用户所有红包
			getNowAllRedBag() {
				PaymentService.getRedbagByStateService({
					redbag_state: 61
				}, res => {
					//console.log(res.redbaglist)
					//可使用的放上边
					res.redbaglist.forEach(redbag => {
						if (redbag.redBag.user_level < this.total) {
							this.redbaglistcan.push(redbag);
						} else {
							this.showline = true;
							this.redbaglistcanot.push(redbag);
						}
					})
				});
			},

			//在地址列表中选中地址
			chooseAddress(ad) {
				this.configAddress = ad;
				this.showAddress = false;

			},
			//在红包列表中选择使用红包
			chooseRedBag(rb) {
				this.selectedRedBag = rb;
				//console.log(this.selectedRedBag);
				this.faceValue = '-￥' + rb.redBag.face_value;
				this.redbagSelect = '';
				this.faceValueNumber = rb.redBag.face_value
				this.showRedBag = false;
			},
			//在红包列表中不使用红包
			notuseRedBag() {
				this.selectedRedBag = [];
				this.faceValue = '';
				this.redbagSelect = '不使用';
				this.faceValueNumber = 0;
				this.showRedBag = false;
			},
			//使用积分
			useIntegralClick() {
				if (this.point >= 100) {
					if (!this.useIntegral) {
						this.integralValue = '-￥10';
						this.useIntegral = true;
						this.integralValueNumber = 10;
					} else {
						this.integralValue = '-￥0';
						this.useIntegral = false;
						this.integralValueNumber = 0;
					}
				} else {
					Toast('积分不足~');
					this.useIntegral = false;
				}
			},
			//返回购物车
			toShoppingCart() {
				this.$router.replace('/shoppingcart');
			},
			//提交订单
			topayorder() {
				let myDate = new Date();
				let order_create_time = tools.dateFtt("yyyy-MM-dd hh:mm:ss", myDate);
				let order_address = this.configAddress.address_id;
				//console.log(order_address)
				//订单明细菜品列表
				let good_order_detail_list = this.sel.map(obj => {
					let newObj = {};
					//console.log(obj)
					newObj.food_name = obj.food.food_name;
					newObj.food_id = obj.food_id;
					//删除store里的菜品
					this.$store.commit('deleteDetails',obj.food_id);
					newObj.food_amount = obj.food_amount;
					newObj.food_total = obj.total_cost;//全部cost
					newObj.detail_attach = obj.detail_attach;
					return newObj;
				});
				//console.log(good_order_detail_list);
				
				//购物车里的菜品id集合
				let shoppingCartIdList = this.sel.map(obj=>{
					return obj.shopping_cart_detail_id;
				});
				console.log('购物车合集')
				console.log(shoppingCartIdList);
				
				//订单合集
				let goodOrder = {
					good_order: {
						order_create_time: order_create_time,
						order_pay_time: '',
						carrier: '',
						carrier_telephone: '',
						order_original_price: this.total + 2 + 2,
						order_true_price: this.orderTruePrice,
						order_remark: '加盐',
						order_address: order_address,
						pay_style: null,
						status: 11,
					},
					good_order_detail_list: good_order_detail_list,
				};
				
				//console.log(this.selectedRedBag.red_bag_id)
				
				//红包使用
				if (this.selectedRedBag.red_bag_id != null) {
					PaymentService.redbagUseService({
						red_bag_id: this.selectedRedBag.red_bag_id,
					}, res => {
						
					});
				}
				
					PaymentService.creategoodorderService(goodOrder, res => {
						
						if(this.useIntegral){
							PaymentService.insertPointDetailService({
								order_id: res.order.order_id,
								point_change_amount: 100,
								point_change_id: 52,//积分减少
							},re=>{
								console.log("积分使用");
							})	
						};
						PaymentService.removeInService(shoppingCartIdList,r=>{
							console.log(r);
						});
						console.log('提交订单按钮res')
						console.log(res.order.order_id)
						this.$router.push({
							name: 'PayOrder',
							params: {
								order:'1',
								order_id: res.order.order_id,
							}
						});
					});
				
				
				

			}
		},
		computed: {
			discount() {
				return this.faceValueNumber + this.integralValueNumber+ parseFloat((this.total*(1-this.vipdiscount)).toFixed(2));
			},
			totalAndOtherPrice() {
				return this.total + 2 + 2;
			},
			orderTruePrice() {
				return parseFloat((this.totalAndOtherPrice - this.discount).toFixed(2));
			},
		},
	}
</script>

<style lang="less">
	.payment {
		width: 100%;
		overflow: auto;

		//display: flex;
		//选择收货地址标题
		.PersonAddtitle {
			margin: 15px;
			font-size: 18px;
			color: #303133;
			font-weight: 400;
			letter-spacing: 1px;
			display: flex;
			justify-content: space-between;
		}

		//选择地址卡片样式
		.PersonAddtitle_card {
			margin: 20px 10px;
			display: flex;

			>div {
				&:nth-child(1) {
					margin: 20px 10px;
				}

				&:nth-child(2) {
					div:nth-child(1) {
						line-height: 30px;
						font-size: 16px;
						color: #303133;
						font-weight: 600;
						letter-spacing: 1.5px;
					}

					div:nth-child(2) {
						line-height: 20px;
						font-size: 14px;
						color: #606266;
						letter-spacing: 1px;
					}
				}

			}

		}

		.payment_navbar {
			width: 100%;
			height: 50px;
			background-color: white;
			display: flex;
			background-color: #fec22c;
			border: 1px solid #fec22c;

			div:nth-child(1) {
				width: 50px;
			}

			div:nth-child(2) {
				margin: auto;
				font-size: 18px;
				color: #303133;

				letter-spacing: 1px;
			}

			div:nth-child(3) {
				width: 50px;
			}
		}

		.fixed_pay {
			height: 60px;
			width: 90%;
			background-color: rgba(0, 0, 0, 0.8);
			position: fixed;
			bottom: 15px;
			left: 5%;
			border-radius: 30px;
			box-shadow: 0 2px 20px 0 rgba(135, 135, 135, 1);
			display: flex;

			>div {
				&:nth-child(1) {
					//悬浮栏提交订单
					flex: 2;

					border-bottom-left-radius: 30px;
					border-top-left-radius: 30px;

					//background-color: lightblue;
					div:nth-child(1) {
						margin: 5px 0 0 25px;
						color: white;

						>span {
							&:nth-child(1) {
								font-size: 16px;
							}

							&:nth-child(2) {
								font-size: 30px;
								line-height: 30px;
							}
						}
					}

					div:nth-child(2) {
						font-size: 14px;
						margin: 0 0 0 25px;
						color: #808287;
						letter-spacing: 1px;
					}
				}

				&:nth-child(2) {
					flex: 1;
					//border: 1px solid #fecf5f;
					border-bottom-right-radius: 30px; //边框右上圆角
					border-top-right-radius: 30px;
					background-image: linear-gradient(to right, #fec22c, #fecf5f);

					>span {
						//提交订单字体
						line-height: 60px;
						margin-left: 15px;
						font-size: 18px;
						color: #212123;
						font-weight: 600;
						letter-spacing: 1.5px;
					}
				}

			}
		}

		.backup {
			width: 100%;
			height: 200px;
			position: absolute;
			top: 50px;
			z-index: -1;

			div:nth-child(1) {
				height: 100px;
				background-color: #fec22c;
			}

			div:nth-child(2) {
				height: 100px;
				background: linear-gradient(to bottom, #fec22c, #F0F0F0);
			}
		}

		//选择地址
		.payment_address {
			height: 120px;
			margin: 10px;
			background-color: white;
			border-radius: 10px;
			display: flex;
			flex-direction: column;

			.payment_address_add {
				margin: 10px;

				>div {
					&:nth-child(1) {
						line-height: 30px;
						font-size: 20px;
						color: #303133;
						font-weight: 600;
						letter-spacing: 1.5px;
					}

					&:nth-child(2) {
						line-height: 20px;
						font-size: 14px;
						color: #606266;
						letter-spacing: 1px;
					}
				}
			}

			.payment_address_deli {
				//background-color: lightcoral;
				display: flex;
				margin: 0 10px;
				justify-content: space-between;

				>div {
					&:nth-child(1) {
						font-size: 15px;
						color: #303133;
						font-weight: 600;
						letter-spacing: 1.5px;
					}

					&:nth-child(2) {
						font-size: 15px;
						color: #fec22c;
						letter-spacing: 1px;
					}
				}
			}
		}


		.orderdetail_order {
			margin: 10px;
			//height: 600px;
			border-radius: 10px;
			background-color: white;
			display: flex;
			flex-direction: column;

			>div {
				&:nth-child(1) {
					//咚咚哒哒美食店
					margin: 10px 0 0 15px;
					font-family: "Helvetica Neue";
					font-size: 16px;
					line-height: 20px;
					color: #303133;
					font-weight: 700;
					letter-spacing: 2px;

				}
			}

			//订单详情框框
			.orderdetail_order_border {
				margin: 15px;
			}
		}

		.orderdetail_order_border {
			margin: 15px;
		}

		//打包费用优惠 总价 引用类
		.other-and-summary {
			margin: 0 auto;

			>div {
				display: flex;
				justify-content: space-between;
				margin-top: 15px;

			}

			.discount {
				>div {
					margin-left: auto;

					>span {
						font-size: 15px;
						color: #303133; //字体颜色
						font-weight: 400; //加粗
						letter-spacing: 1.5px;
						margin-left: 5px;

						&:nth-child(2) {
							margin-right: 10px;
							color: #e70c04;
						}

						&:nth-child(4) {
							font-size: 20px;
							//line-height: 18px;
							color: #4b4d50; //字体颜色
							font-weight: 300; //加粗
							letter-spacing: 1px;
						}
					}
				}
			}
		}


		.foods_box {
			//菜品
			height: 80px;
			display: flex;

			div:nth-child(1) {
				flex: 1;
				margin-left: 15px;
				//background-color: lightblue;
				display: flex;
			}

			div:nth-child(2) {
				flex: 4;
				display: flex;
				margin: 15px;
				flex-direction: column;
				justify-content: space-around;
				//background-color: lightcoral;
				text-align: left;

				>span {
					&:nth-child(1) {
						margin-top: 10px;
						font-size: 15px;
						line-height: 24px;
						color: #303133; //字体颜色
						font-weight: 400; //加粗
						letter-spacing: 1px;
					}

					&:nth-child(2) {
						font-size: 13px;
						//line-height: 24px;
						color: #606266; //字体颜色
						letter-spacing: 1px;
					}

					&:nth-child(3) {
						font-size: 13px;
						line-height: 24px;
						color: #606266; //字体颜色
						font-weight: 400; //加粗
						letter-spacing: 1px;
					}
				}
			}

			div:nth-child(3) {
				flex: 2;
				margin: 20px 15px 15px 0;
				text-align: right;
				
				>span {
					&:nth-child(1) {
						margin-right: 5px;
						text-decoration:line-through;
						font-size: 16px;
						line-height: 20px;
						color: #e70c04; //字体颜色
						font-weight: 600; //加粗
						letter-spacing: 1px;
					}
					&:nth-child(2) {
						font-size: 20px;
						line-height: 20px;
						color: #4b4d50; //字体颜色
						font-weight: 300; //加粗
						letter-spacing: 1px;
					}
				}
			}
		}

		//横线
		.hr {
			border-bottom: 1px solid #e6e6e6;
			height: 0px;
			padding-bottom: 10px;

		}


		//红包样式
		.coupon {
			display: inline-flex;
			color: white;
			//border: 1px solid #fff;
			position: relative;
			padding-left: .5rem;
			padding-right: .5rem;
			margin: 10px;
			/** 这里不能用百分号，因为百分号是分别相对宽和高计算的，会导致弧度不同  */
			border-top-right-radius: .3rem;
			border-bottom-right-radius: .3rem;
			//overflow: hidden;
		}

		.coupon-yellow-gradient {
			background-image: linear-gradient(150deg, #F39B00 50%, #F39B00D8 50%);
		}

		.coupon-blue-gradient {
			background-image: linear-gradient(150deg, #A9A9A9 50%, #C0C0C0 50%);
		}

		/* 左边框的波浪 */
		.coupon-wave-left::before {
			content: '';
			position: absolute;
			top: 0;
			height: 100%;
			width: 12px;
			background-image: radial-gradient(white 0, white 4px, transparent 4px);
			/** 如果只设置为半径的两倍(直径)，那么半圆之间没有类似堤岸的间隔 */
			background-size: 14px 14px;
			background-position: 0 0px;
			background-repeat: repeat-y;
			z-index: 1;
		}

		.coupon-wave-left::before {
			left: -7px;
		}

		.coupon-info {
			padding-left: 1rem;
			padding-right: 1rem;
			padding-top: 1rem;
			padding-bottom: 1.5rem;
			position: relative;
			min-width: 12rem;
		}

		.coupon-info-right-dashed {
			border-right: 2px dashed white;
		}

		.coupon-info-right-solid {
			border-right: 2px solid white;
		}

		/* 使用两个边框为圆角的白色div制造半圆缺角，有个缺点是这个缺角必须与背景色相同（clip-path不好弄） */
		.coupon-hole::before,
		.coupon-hole::after {
			content: '';
			width: 1rem;
			height: 1rem;
			background-color: white;
			border-radius: 50%;
			position: absolute;
			right: -.6rem;
		}

		.coupon-info::before {
			top: -.5rem;
		}

		.coupon-info::after {
			bottom: -.5rem;
		}

		.coupon-info>div {
			margin-bottom: .2rem;
		}

		.coupon-price {
			font-size: 250%;
			font-weight: bold;
		}

		.coupon-price>span {
			font-size: 40%;
			margin-left: .5rem;
			font-weight: normal;
		}

		.coupon-get {
			padding: 1rem;
			/** 这里使用flex是为了让文字居中 */
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
			min-width: 5rem;
			position: relative;
		}

		.coupon-get>.coupon-desc {
			font-size: 150%;
			margin-bottom: .5rem;
			font-weight: bold;
		}

	}
</style>
